<template>
  <div id="road" @click="change"
    :style="log == 0 ? 'background-color:rgb(245, 245, 245)' : 'background-color: rgba(13, 13, 13, 0.8)'">上报路况</div>
  <div id="login-box" :style="log == 0 ? 'display:none' : 'display:block;zIndex:40'">
    <form action="">
      <label>事故类型:

        <input v-model="type" type="text" placeholder="请输入事故类型（碰撞，刮蹭，失火，碾压，翻车，追尾）">
      </label>
      <label>事故地点:
        <input v-model="mark" type="text" placeholder="请输入事故地点...">
      </label>
      <label>事故描述:
        <input v-model="describe" type="text" placeholder="请输入事故地点...">
      </label>
      <label>车牌号:
        <input v-model="carnum" type="text" placeholder="请输入车牌号...">
      </label>
      <label>车主:
        <input v-model="driver" type="text" placeholder="请输入车主姓名...">
      </label>
      <label>评估等级:
        <input v-model="level" type="text" placeholder="车祸评估等级（1、2、3、4）越高越严重">
      </label>
      <button type="button" @click="login">上报</button>
      <p id="close" @click="close">×</p>
    </form>
  </div>
</template>
  
<script setup>
import { applyFilter } from '@turf/turf';
import { ref, computed } from 'vue'
import axios from "axios"
const log = ref(0);
let active = ref()
let describe
let mark
let type
let carnum
let driver
let level

const change = () => {
  if (log.value == 0) {
    log.value = 1
  } else {
    log.value = 0
  }
}
const login = () => {
  axios.get('http://127.0.0.1/road/add', {
    params: {
      event_type: type,
      event_mark: mark,
      event_describe: describe,
      event_carnum: carnum,
      event_name: driver,
      event_level: level
    }
  }).then(res => {
     console.log(res.data);
     
    if (res.data.status == 200) {
      alert('添加成功')
      log.value = 0
    }
  }).catch(err => {
    console.log("操作失败" + err);
  })
}


const close = () => {
  log.value = 0;
  //清空input中的内容
  describe == ''
  mark == ''
  type == ''
  carnum == ''
  driver == ''
  level == ''

}

</script>
<style scoped>
#road {
  height: 100%;
  width: 150px;
  font-size: 25px;
  color: grey;
  line-height: 80px;
  border-left: 1px solid;
  border-color: gray;
  padding-left: 7px;
  padding-right: 7px;
  align-items: center;
  display: flex;
  justify-content: center;

}

#login-box {
  padding: 20px;
  display: none;
  width: 400px;
  height: 400px;
  display: flex;
  border-radius: 5px;
  position: absolute;
  background-color: #a8a8a8;
  background-image: linear-gradient(0deg, #a8a8a8 95%, #545454 95%, #6d6969 100%);
  margin-left: 700px;
  margin-top: 300px;
  z-index: 200;
}

#login-box>form {
  text-align: center;
}

#login-box label {
  display: block;
  font-size: 20px;
  margin: 20px 0 0 0;
}

#login-box label input {
  width: 200px;
  height: 30px;
}

#login-box button {
  width: 200px;
  height: 30px;
  margin: 20px 0 0 0;
  width: 90px;
  border-radius: 5px;
}

#close {
  font-size: 18px;
  position: absolute;
  top: 0;
  right: 5px;
  cursor: pointer;
}</style>